<template>
<view class="flex-col justify-start page">
  <view class="flex-col group_3">
    <view class="flex-col">
      <view class="flex-col group_4">
        <view class="flex-row justify-between self-stretch group_5">
          <text class="font_2 text_5">小面</text>
          <text class="font_2 text_6">中面</text>
          <text class="font_2">依维柯</text>
          <text class="font_2 text_7">厢货</text>
        </view>
        <view class="self-end section"></view>
      </view>
      <image
        class="image_5"
        src="/static/icon/bf.png"
      />
    </view>
    <view class="flex-col mt-21-5">
      <view class="flex-col group_6">
        <text class="self-start font_3">详情介绍</text>
        <view class="flex-col self-stretch mt-22-5">
          <view class="flex-row items-center">
            <view class="section_2"></view>
            <text class="font_4 ml-12-5">可装载：冰箱、沙发、洗衣机等大型家具家电</text>
          </view>
          <view class="flex-row items-center mt-17">
            <view class="section_3"></view>
            <text class="font_4 text_8 ml-12-5">禁止：厢货不可下地库</text>
          </view>
          <view class="flex-row items-center mt-17">
            <view class="section_2"></view>
            <text class="ml-12 font_4 text_9">适合：有大型家具家电的家庭搬家</text>
          </view>
        </view>
      </view>
      <image
        class="image_6 mt-23"
        src="/static/icon/imgzt.png"
      />
      <view class="flex-col group_7 mt-23">
        <view class="flex-col">
          <view class="flex-row justify-between items-center group_8">
            <text class="font_3 text_10">收费标准</text>
            <view class="flex-row items-center group_9">
              <text class="font_5 text_11">查看更多</text>
              <image
                class="shrink-0 image_7"
                src="https://ide.code.fun/api/image?token=66097c687dc3fc0011cb7032&name=671bf7559a0eeda294d3f34acdd683f2.png"
              />
            </view>
          </view>
          <view class="flex-row items-center section_4">
            <view class="flex-col justify-start items-center shrink-0 text-wrapper">
              <text class="font_4 text_12">厢货总费用</text>
            </view>
            <view class="flex-col items-start flex-1 group_10 ml-11-5">
              <text class="font_6">起步价+超公里费+楼层费+平地搬运费+大件</text>
              <text class="font_6">搬运费+拆装费+额外服务费</text>
            </view>
          </view>
        </view>
        <view class="mt-24 flex-col">
          <text class="self-start font_7">起步价</text>
          <view class="flex-col text-area group_11 mt-13">
            <view class="flex-row justify-between self-stretch section_5">
              <text class="font_8 text_13">含10公里+2人全程搬运</text>
              <view class="group_12">
                <text class="font_9">398</text>
                <text class="font_8 text_14">元（工作日）</text>
              </view>
            </view>
            <view class="self-end group_13 mt-15">
              <text class="font_9">448</text>
              <text class="font_8 text_15">元（周末）</text>
            </view>
          </view>
        </view>
        <view class="mt-24 flex-col">
          <text class="self-start font_7">超公里费</text>
          <view class="flex-row justify-between self-stretch section_6 mt-13">
            <text class="font_8 text_16">每公里</text>
            <view class="group_14">
              <text class="font_9 text_17">7</text>
              <text class="font_8">元/公里</text>
            </view>
          </view>
        </view>
        <view class="mt-24 flex-col">
          <text class="self-start font_7">楼层费</text>
          <view class="flex-col self-stretch group_15 mt-12-5">
            <view class="flex-row justify-between section_7">
              <text class="font_8 text_18">全程电梯或楼梯1层</text>
              <text class="font_8 text_19">免费</text>
            </view>
            <view class="flex-row justify-between group_21">
              <text class="font_8 text_20">楼梯2-3层</text>
              <view class="group_14">
                <text class="font_9">20</text>
                <text class="font_8">元/层</text>
              </view>
            </view>
            <view class="flex-row justify-between section_8">
              <text class="font_8 text_21">楼梯4-6层</text>
              <view class="group_14">
                <text class="font_9">30</text>
                <text class="font_8">元/层</text>
              </view>
            </view>
            <view class="flex-row justify-between group_1">
              <text class="font_8 text_22">楼梯7层及以上</text>
              <view class="group_14">
                <text class="font_9 text_23">45</text>
                <text class="font_8">元/层</text>
              </view>
            </view>
          </view>
        </view>
        <view class="mt-24 flex-col">
          <view class="flex-row justify-between group_17">
            <text class="font_7 text_24">常见问题</text>
            <view class="flex-row items-center group_18">
              <text class="font_5 text_25">全部问题</text>
              <image
                class="shrink-0 image_7"
                src="https://ide.code.fun/api/image?token=66097c687dc3fc0011cb7032&name=cb85edb0d0733a7233996f0d0eb6723f.png"
              />
            </view>
          </view>
          <view class="flex-col">
            <view class="flex-col group_19" v-for="(item, index) in items" :key="index">
              <view class="flex-row">
                <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_10">Q</text></view>
                <text class="ml-10 font_7 text_26">开通城市有哪些？</text>
              </view>
              <view class="flex-col mt-16-5">
                <view class="flex-row items-center self-stretch">
                  <view class="flex-col justify-start items-center shrink-0 text-wrapper_3">
                    <text class="font_12">A</text>
                  </view>
                  <text class="ml-10 font_11">开通城市有北京、上海、广州、深圳、北京、</text>
                </view>
                <text class="self-start font_11 text_27 mt-3-5">上海、广州、深圳等城市</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				 items: [null, null],
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	
	.mt-21-5 {
	  margin-top: 43rpx;
	}
	.mt-22-5 {
	  margin-top: 45rpx;
	}
	.mt-17 {
	  margin-top: 34rpx;
	}
	.ml-12-5 {
	  margin-left: 25rpx;
	}
	.mt-23 {
	  margin-top: 46rpx;
	}
	.ml-11-5 {
	  margin-left: 23rpx;
	}
	.mt-15 {
	  margin-top: 30rpx;
	}
	.mt-13 {
	  margin-top: 26rpx;
	}
	.mt-12-5 {
	  margin-top: 25rpx;
	}
	.mt-16-5 {
	  margin-top: 33rpx;
	}
	.mt-3-5 {
	  margin-top: 7rpx;
	}
	.page {
	  padding-bottom: 143rpx;
	  background-color: #ffffff;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.group_3 {
	  padding: 9.28rpx 0 108.5rpx;
	  overflow-y: auto;
	}
	.group_4 {
	  padding: 0 61.98rpx 24rpx 66.02rpx;
	}
	.group_5 {
	  padding: 24rpx 0 27.92rpx;
	}
	.font_2 {
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  line-height: 27.7rpx;
	  color: #666666;
	}
	.text_5 {
	  line-height: 27.14rpx;
	}
	.text_6 {
	  line-height: 27.84rpx;
	}
	.text_7 {
	  color: #222222;
	  font-weight: 600;
	  line-height: 28.24rpx;
	}
	.section {
	  margin-right: 2.02rpx;
	  background-color: #2b8eff;
	  border-radius: 1rpx;
	  width: 60rpx;
	  height: 6rpx;
	}
	.image_5 {
	  margin: 0 12rpx;
	  border-radius: 12rpx;
	  width: 96.8vw;
	  height: 41.2vw;
	}
	.group_6 {
	  padding: 0 25rpx;
	}
	.font_3 {
	  font-size: 36rpx;
	  font-family: PingFang SC;
	  line-height: 33.6rpx;
	  color: #222222;
	}
	.section_2 {
	  background-color: #07c28b;
	  border-radius: 50%;
	  width: 14rpx;
	  height: 14rpx;
	}
	.section_3 {
	  background-color: #ff1101;
	  border-radius: 50%;
	  width: 14rpx;
	  height: 14rpx;
	}
	.font_4 {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 26.14rpx;
	  color: #222222;
	}
	.text_8 {
	  line-height: 26.08rpx;
	}
	.text_9 {
	  line-height: 25.96rpx;
	}
	.image_6 {
	  width: 100vw;
	  height: 32vw;
	}
	.group_7 {
	  padding-left: 24rpx;
	  padding-right: 22rpx;
	}
	.group_8 {
	  padding: 0 2.04rpx 32rpx;
	}
	.text_10 {
	  line-height: 33.84rpx;
	}
	.group_9 {
	  margin-right: 10.84rpx;
	}
	.font_5 {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 26.14rpx;
	  color: #666666;
	}
	.text_11 {
	  line-height: 25.78rpx;
	}
	.image_7 {
	  width: 20rpx;
	  height: 20rpx;
	}
	.section_4 {
	  background-color: #2b8eff14;
	  border-radius: 16rpx;
	}
	.text-wrapper {
	  padding: 45.82rpx 0 44.04rpx;
	  background-color: #2b8eff;
	  border-radius: 16rpx 0rpx 0rpx 16rpx;
	  width: 180rpx;
	  height: 116rpx;
	}
	.text_12 {
	  color: #ffffff;
	}
	.group_10 {
	  margin-right: 31.1rpx;
	}
	.font_6 {
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  line-height: 36rpx;
	  color: #222222;
	}
	.text-area {
	  align-self: stretch;
	}
	.group_11 {
	  padding-bottom: 27.42rpx;
	  border-radius: 16rpx;
	  border-left: solid 1rpx #f4f5f7;
	  border-right: solid 1rpx #f4f5f7;
	  border-top: solid 1rpx #f4f5f7;
	  border-bottom: solid 1rpx #f4f5f7;
	}
	.section_5 {
	  padding: 29.14rpx 9.4rpx 28.42rpx 26.78rpx;
	  background-color: #f4f5f7;
	  border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.font_8 {
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  line-height: 22.14rpx;
	  color: #222222;
	}
	.text_13 {
	  line-height: 22.12rpx;
	}
	.group_12 {
	  line-height: 22.42rpx;
	  height: 22.42rpx;
	}
	.font_9 {
	  font-size: 24rpx;
	  font-family: PingFang SC;
	  line-height: 17.8rpx;
	  color: #2b8eff;
	}
	.text_14 {
	  line-height: 22.42rpx;
	}
	.group_13 {
	  margin-right: 10.58rpx;
	  line-height: 22.42rpx;
	}
	.text_15 {
	  line-height: 22.42rpx;
	}
	.section_6 {
	  padding: 29.22rpx 26.96rpx 28.54rpx;
	  background-color: #f4f5f7;
	  border-radius: 16rpx;
	}
	.text_16 {
	  line-height: 22.18rpx;
	}
	.group_14 {
	  line-height: 22.14rpx;
	  height: 22.14rpx;
	}
	.text_17 {
	  line-height: 17.14rpx;
	}
	.group_15 {
	  border-radius: 16rpx 16rpx 0rpx 0rpx;
	  border-left: solid 1rpx #f4f5f7;
	  border-right: solid 1rpx #f4f5f7;
	  border-top: solid 1rpx #f4f5f7;
	  border-bottom: solid 1rpx #f4f5f7;
	}
	.section_7 {
	  padding: 29.26rpx 22.78rpx 28.48rpx 26.86rpx;
	  background-color: #f4f5f7;
	  border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.text_18 {
	  line-height: 22.18rpx;
	}
	.text_19 {
	  color: #2b8eff;
	  line-height: 22.26rpx;
	}
	.group_21 {
	  padding: 29.3rpx 23.92rpx 28.52rpx 24.84rpx;
	}
	.text_20 {
	  line-height: 22.18rpx;
	}
	.section_8 {
	  padding: 29.3rpx 21.94rpx 28.52rpx 26.84rpx;
	  background-color: #f4f5f7;
	}
	.text_21 {
	  line-height: 22.18rpx;
	}
	.group_1 {
	  padding: 29.3rpx 23.92rpx 30.44rpx 24.84rpx;
	}
	.text_22 {
	  line-height: 22.26rpx;
	}
	.text_23 {
	  line-height: 17.46rpx;
	}
	.group_17 {
	  padding: 0 2.34rpx;
	}
	.group_18 {
	  margin-right: 10.56rpx;
	  margin-top: 2.46rpx;
	}
	.text_25 {
	  line-height: 25.92rpx;
	}
	.group_19 {
	  padding: 34.14rpx 0 41.12rpx;
	  border-bottom: solid 2rpx #f4f5f7;
	}
	.text-wrapper_2 {
	  padding: 8.44rpx 0 7.46rpx;
	  background-color: #2b8eff;
	  border-radius: 8rpx;
	  width: 32rpx;
	  height: 32rpx;
	}
	.font_10 {
	  font-size: 20rpx;
	  font-family: PingFang SC;
	  line-height: 16.1rpx;
	  color: #ffffff;
	}
	.font_7 {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 29.86rpx;
	  color: #222222;
	}
	.text_24 {
	  line-height: 29.94rpx;
	}
	.text_26 {
	  margin-bottom: 2.72rpx;
	  line-height: 29.74rpx;
	}
	.text-wrapper_3 {
	  padding: 8.72rpx 0 9rpx;
	  background-color: #ff772b;
	  border-radius: 8rpx;
	  width: 32rpx;
	  height: 32rpx;
	}
	.font_12 {
	  font-size: 20rpx;
	  font-family: PingFang SC;
	  line-height: 14.28rpx;
	  color: #ffffff;
	}
	.font_11 {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 38rpx;
	  color: #666666;
	}
	.text_27 {
	  margin-left: 51.78rpx;
	}

</style>
